<route lang="json5" type="voyageArrival">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '航次抵港',
  },
}
</route>
<template>
  <view class="service_detail_container">
    <view class="title_box">
      <img src="../../static/images/ic_voyage_tab_back.png" />
      <text>{{ t('voyage.infoArrival') }}</text>
      <text class="right_text">{{ t('voyage.saveBtn') }}</text>
    </view>
    <view class="msg_content">
      <view v-for="(item, index) in dataList" :key="index">
        <formItem :dataObj="item"></formItem>
      </view>
    </view>
    <view class="arrivalCondition">
      <text></text>
      <text>{{ t('voyage.arrivalConditions') }}</text>
    </view>
    <view class="msg_content">
      <view v-for="(item, index) in conditionList" :key="index">
        <formItem :dataObj="item"></formItem>
      </view>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import formItem from './components/formItem.vue'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()

defineOptions({
  name: 'VoyageArrival',
})
// 获取屏幕边界到安全区域距离
// const { safeAreaInsets } = uni.getSystemInfoSync()

// 测试 uni API 自动引入
// onload(() => {})
const remarks = ref('')
const dataList = reactive([
  {
    label: computed(() => t('voyage.tonnageTaxDays')),
    value: 'dunshui',
    required: true,
    type: 'select',
    selectList: [10, 20, 30],
  },
  {
    label: computed(() => t('voyage.sailingEndTime')),
    value: 'chuanbojieshudate',
    type: 'selectDate',
  },
  {
    label: computed(() => t('voyage.arrivalTime')),
    value: 'digangdate',
    type: 'selectDate',
    required: true,
  },
  {
    label: computed(() => t('voyage.arrivalPosition')),
    value: 'diganglocation',
    required: true,
    type: 'select',
    selectList: [10, 20, 30],
  },
  {
    label: computed(() => t('voyage.NORTenderedAt')),
    value: 'dijiaoNORtime',
    type: 'selectDate',
  },
  {
    label: computed(() => t('voyage.accordingToTheCharterparty')),
    value: 'hetongyueding',
    type: 'select',
    selectList: [computed(() => t('voyage.yes')), computed(() => t('voyage.no'))],
  },
  {
    label: computed(() => t('voyage.NORAcceptionTime')),
    value: 'shoudaoNORtime',
    type: 'selectDate',
  },
])
const conditionList = reactive([
  {
    label: computed(() => t('voyage.FO')),
    value: 'dunshui',
    required: true,
    type: 'input',
  },
  {
    label: computed(() => t('voyage.DO')),
    value: 'chuanbojieshudate',
    type: 'input',
    required: true,
  },
  {
    label: computed(() => t('voyage.FW')),
    value: 'digangdate',
    type: 'input',
    required: true,
  },
  {
    label: computed(() => t('voyage.draftF')),
    value: 'diganglocation',
    required: true,
    type: 'input',
  },
  {
    label: computed(() => t('voyage.draftA')),
    required: true,
    value: 'dijiaoNORtime',
    type: 'input',
  },
])
</script>
<style lang="scss" scoped>
.service_detail_container {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #f8f9fb;
  scrollbar-width: none; /* 隐藏滚动条（Firefox） */
  &::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
  }
  .top_box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30rpx 30rpx 26rpx 140rpx;
    font-size: 22rpx;
    color: #fff;
    background-color: #295699;
    border: none;
    img {
      position: absolute;
      top: 50%;
      left: 30rpx;
      width: 80rpx;
      margin-right: 20rpx;
      transform: translateY(-50%);
    }
    .msg_box {
      display: flex;
      flex-direction: column;
      font-size: 20rpx;
      color: #6689c0;
      text {
        margin-bottom: 4rpx;
        &:nth-child(1) {
          font-size: 26rpx;
          color: #fff;
        }
      }
    }
  }
  .msg_content {
    background-color: #fff;
  }
  .arrivalCondition {
    display: flex;
    align-items: center;
    height: 32rpx;
    padding: 30rpx 30rpx;
    background-color: #fff;
    border-top: 2rpx solid #f8f9fb;
    text {
      color: #295699;
      &:nth-child(1) {
        display: inline-block;
        width: 8rpx;
        height: 100%;
        margin-right: 20rpx;

        background-color: #295699;
      }
    }
  }
}
</style>
